<template>
  <div class="comment">
    <!-- 表单区域 -->
    <van-field
      v-model="content"
      rows="2"
      autosize
      label="发表评论"
      type="textarea"
      maxlength="50"
      placeholder="请输入留言"
      show-word-limit
    />
    <!-- 提交按钮 -->
    <van-button
      class="add"
      type="primary"
      block
      @click="sendComment"
    >提交</van-button>
    <!-- 列表渲染 -->
    <template v-if="comments.length!==0">
      <van-card
        :desc="comment.content"
        v-for="comment in comments"
        :key="comment.id"
      >
        <template #thumb>
          <div>
            <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
            <span>{{comment.user_name}}</span>
          </div>
        </template>
        <template #title>
          <van-rate
            v-model="comment.rate"
            class="my-rate"
          />
        </template>
        <template #price>
          <div>
            {{comment.add_time}}
          </div>
        </template>
      </van-card>

      <van-button
        class="add"
        type="primary"
        block
        @click="getMore"
      >{{moreText}}</van-button>
    </template>
    <template v-else>
      <div>
        正在加载......
      </div>
    </template>
  </div>
</template>

<script>
export default {
  props: ['id'],
  data: () => ({
    content: '',
    comments: [],
    pageNo: 0,
    pageSize: 100,
    hasMore: false
  }),
  created() {
    // console.log(this.msg);
    // this.artid = this.msg[0].id;
    // console.log(this.artid);
    this.getcomments();
  },
  methods: {
    async getcomments() {
      //不准往下点了
      if (this.hasMore) return;
      ++this.pageNo;
      const res = await this.$http.getcomments({
        id: this.id,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      });
      // console.log(res);
      //只是在当前页面进行刷新覆盖
      // this.comments = res.data.message;
      //数组合并成一个新的数组
      this.comments = this.comments.concat(res.data.message);
      this.hasMore = this.pageNo * this.pageSize > res.data.count;
      // console.log(this.hasMore);
    },
    async sendComment() {
      // console.log(this.content);
      await this.$http.sendComment({
        id: this.id,
        content: this.content
      })
      this.comments.unshift({
        "id": new Date().getTime(),
        "user_name": "匿名用户",
        "add_time": new Date().getTime(),
        "content": this.content,
        "artid": this.id,
        "rate": 4
      })
      // console.log(res);
    },
    getMore() {
      this.getcomments();
    }
  },
  computed: {
    moreText() {
      return this.hasMore ? "被掏空了" : "加载更多";
    }
  }
}
</script>
<style lang="scss">
.comment {
  .van-cell {
    border: 1px solid #ddd;
    margin-top: 20px;
    .van-field__label {
      span {
        font-size: 16px;
        font-weight: 600;
      }
    }
  }
  .add {
    margin-top: 10px;
  }
  .van-icon {
    font-size: 50px;
    display: block;
  }
  .my-rate {
    .van-icon {
      font-size: 16px;
    }
  }
}
</style>